<template>
	<div class="modal-list">
		<div>
			<div class="new-modal-title">
				筛选
				<i class="ion-close-round delete" @click="rDelete()"></i>
			</div>
			<div class="reserve" style="height: 100vh; overflow-y: auto;">
				<ul>
					<li v-if="coditionAll">
						<div class="car-editor-title">
							归属员工
						</div>
						<list>
							<item>
								<div class="car-enitor-screen">
									<div v-for="(item,index) in screen" >
										<input type="radio" :id="index" :value="item.userId" @click="radioChange(index)" v-model="checkedNames.id">
	  									<label :for="index" :class="{on:checkedNames.id==item.userId}" >{{item.userName}}</label>
									</div>
								</div>
								<!-- {{checkedNames.name}} -->
							</item>
						</list>
					</li>
					<li>
						<list>
							<item>
								<div class="car-editor-tr">
									<div class="car-editor-name">是否到店</div>
									<div class="car-editor-input">
										<div class="car-editor-radio">
											<input type="radio" name="customerGender" class="none" v-model="isReach" :value="true" id="true">
											<label for="true">是</label>
											<input type="radio" name="customerGender" class="none" v-model="isReach" :value="false" id="false" />
											<label for="false">否</label>
										</div>
									</div>
									
								</div>
							</item>
							<item style="text-align: center">
								<button @click="genderDelete()" class="screen-submit">确定</button>
								<button @click="cancel()" class="screen-submit on">清空</button>
							</item>
						</list>
					</li>					
				</ul>
			</div>		
		</div>
	</div>
</div>
</template>

<script>
	export default{
		data(){
			return{
				screen:[],
				checkedNames:{
					id:'',
					name:''
				},
				isReach:'',
			}
		},
		methods:{
			genderDelete(){
				this.$emit('cancel',{
					checkedName:this.checkedNames.name,
					checkedId:this.checkedNames.id,
					isReach:this.isReach,
					submit:true,
				})
			},
			radioChange(index){
				this.checkedNames.name = this.screen[index].userName
			},
			rDelete(){
				this.$emit('cancel',{submit:false})
			},
			cancel(){
				this.isReach = ''
				this.checkedNames.name = ''
				this.checkedNames.id = ''	
				this.$emit('cancel',{
					checkedName:this.checkedNames.name,
					checkedId:this.checkedNames.id,
					isReach:this.isReach,
					submit:true,
				})
			}
		},
		created(){
			window.axios.get(baseUrl+'/controller/getUserList',{params:{
				marketId:sess.get('userSession').marketId,
       			shopId:sess.get('userSession').shopId
			}}).then((res)=>{
				// console.log(res)
				this.screen = res.data.result
			})
		},
		mounted(){
			
		},
		props:[			
			'coditionAll'
		]
	}
</script>
<style scoped="scoped">
	.screen-submit{ width: 40%; display: inline-block; vertical-align: middle; height: 40px; border-radius: 5px;border:0 none; outline: 0 none; margin: 10px auto;background: #FF6816; color: #fff;}
	.screen-submit.on{ border-radius: #fff; color:#FF6816; border:1px solid #FF6816; background: none; }
</style>

